<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
<%@include file="/resources/common/commonTaglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 导入资源文件 -->
<%@include file="/resources/common/commonJs.jsp" %>
<%@include file="/resources/common/commonCss.jsp" %>
<title>校车列表</title>
<script type="text/javascript">
//添加
function toBusAdd() {
	window.location.href = '${path}/schoolbus/toSchoolBusAdd'
}

//激活校车
function startUpBus(id, driverId) {
	//选择司机, 没有选择司机， 不能去激活
	if (driverId == '') {
		top.layer.alert('没有选择司机, 不能激活校车!');
		return false;
	}
	top.layer.confirm('确定启用该校车?', function(index) {
		var url = '${path}/schoolbus/startUpBus/'+id;
		$.post(url, {}, function(data) {
			if (data.status == 'error') {
				top.layer.close(index);
				top.layer.alert('激活失败!');
			} else if (data.status == 'success') {
				top.layer.close(index);
				top.layer.alert('激活成功!', function(i) {
					top.layer.close(i);
					window.location.href = '${path}/schoolbus/schoolBusList';
				});
			}
		}, 'json');
	});
}

//删除
function busDel(id) {
	top.layer.confirm('确定要删除选择的校车吗？', function(index) {
		var url = '${path}/schoolbus/schoolbusDel/'+id;
		$.post(url, {}, function(data) {
			if (data.status == 'success') {
				top.layer.close(index);
				top.layer.alert('校车删除成功!');
				window.location.href = '${path}/schoolbus/schoolBusList';
			} else if (data.status == 'error') {
				top.layer.close(index);
				top.layer.alert('校车删除失败!');
			}
		}, 'json');
	});
}
//详情
function detail(id) {
	window.location.href = '${path}/schoolbus/schoolbusDetails/'+id;
}

function changeSelect(currentThis) {
	var val = $(currentThis).val();
	var text = $(currentThis).text();
	if (val === '-1') {
		$(currentThis).parent().html('双击指定');
		return false;
	}
	var busId = $(currentThis).parents('tr').find('input[name="busId"]').val();
	//为校车分配司机
	var url = '${path}/schoolbus/assignDriver/'+busId+'/'+val;
	$.post(url, {}, function(data) {
		if (data.status == 'error') {
			top.layer.alert('司机分配失败!')
		} else if (data.status == 'success') {
			top.layer.alert('司机分配成功!', function(index) {
				//刷新页面
				top.layer.close(index);
				window.location.href = '${path}/schoolbus/schoolBusList';
			})
			
		}
	}, 'json');
}

$(function() {
	//全选/全不选
	$('#quanxuan').click(function() {
		var checkStatus = $(this).attr('checked');
		var $quanxuan = $('input[name="quanxuan"]');
		if (checkStatus) {
			$quanxuan.attr('checked', true);
		} else {
			$quanxuan.attr('checked', false);
		}
	});
	
	//指定司机
	$('.assignDriver').on('dblclick', function() {
		var assignHtml = '<select name="selectDriver" class="form-control" onchange="changeSelect(this)">'
						+'<option value="-1">请选择</option>'
						+'<c:forEach items="${drivers }" var="data">'
						+'	<option value="${data.id }">${data.name }</option>'
						+'	</c:forEach>'
						+'</select>';
		$(this).html(assignHtml);
	});
})
</script>
</head>
<body>
<body style="margin: 5px 5px;">
<!-- 条件参数查询start -->
<form action="${path }/schoolbus/schoolBusList" method="post" id="searchForm">
	<input type="hidden" name="pageNumber" value="${number }"/>
	<input type="hidden" name="pageSize" value="${size }"/>
	<!-- 实体对象查询参数 -->
	<table style="margin-top: 20px;margin-bottom: 25px; width: 100%">
		<tbody>
		<tr>
			<td>校车名</td>
			<td><input type="text" name="name" value="${searchVal.name }" class="form-control"/></td>
			<td>校车状态</td>
			<td>
				<select name="status" class="chosen-select form-control">
					<option value="-1">请选择</option>
					<option value="0" <c:if test="${searchVal.status == 0 }">selected</c:if>>新建</option>
					<option value="1" <c:if test="${searchVal.status == 1 }">selected</c:if>>空闲</option>
					<option value="2" <c:if test="${searchVal.status == 2 }">selected</c:if>>待发车</option>
					<option value="3" <c:if test="${searchVal.status == 3 }">selected</c:if>>发车中</option>
					<option value="4" <c:if test="${searchVal.status == 4 }">selected</c:if>>维修</option>
				</select>
			</td>
			<td>容纳人数</td>
			<td><input type="text" name="seatTotal" value="${searchVal.seatTotal }" class="form-control"/></td>
			<td>
				<button class="btn btn-primary" onclick="search()">查询</button>
				<button class="btn resetBtn">重置</button>
			</td>
		</tr>
		</tbody>
	</table>
</form>
<!-- 条件参数查询end -->
<!-- 其他操作按钮start -->
<div>
	<button onclick="toBusAdd()" class="btn btn-primary">添加校车</button>
	<!-- <button onclick="batchDel()" class="btn btn-primary">批量删除</button> -->
</div>
<!-- 其他操作按钮end -->
<!-- 数据列表的显示start -->
<div class="listDataTableStyle">
	<table cellpadding="0" cellspacing="0" width="100%">
		<thead>
		<tr>
			<th><input type="checkbox" id="quanxuan"/></th>
			<th>序号</th>
			<th>校车名</th>
			<th>校车编号</th>
			<th>可容纳人数</th>
			<th>当前状态</th>
			<th>当前位置</th>
			<th>指派司机</th>
			<th>指派次数</th>
			<th>系统录入时间</th>
			<th>操作</th>
		</tr>
		</thead>
		<tbody>
		<c:if test="${empty page.content }">
			<tr><td colspan="12">没有校车信息</td></tr>
		</c:if>
		<c:if test="${!empty page.content }">
		<c:forEach items="${page.content }" var="data" varStatus="index">
		<tr>
			<td><input type="checkbox" name="quanxuan"/><input type="hidden" value="${data.id }"/></td>
			<td>${index.index + 1}<input type="hidden" name="busId" value="${data.id }"/></td>
			<td>${data.name }</td>
			<td>${data.schoolNo }</td>
			<td>${data.seatTotal }</td>
			<td>${data.status == 1 ? '空车' : (data.status == 2 ? '满车' : data.status == 0 ? '新建' : '未知') }</td>
			<td>${data.localStatus == 1 ? '金花校区' : '临潼校区' }</td>
			<td class="assignDriver" style="cursor: pointer;">${empty data.driverEntity ? '双击指定' : data.driverEntity.name }</td>
			<td>${data.busLogNum }</td>
			<td><fmt:formatDate value="${data.createDate }" pattern="yyyy-MM-dd"/></td>
			<td>
				<a href="javascript:;" class="icon-minus-sign" onclick="busDel('${data.id}')">删除</a>&nbsp;
				<a href="javascript:;" class="icon-info-sign" onclick="detail('${data.id}')">查看</a>
				<c:if test="${data.status == 0 }"><a href="javascript:;" class="icon icon-warning-sign" style="color: red" onclick="startUpBus('${data.id}', '${data.driverEntity.id }')">激活</a></c:if>
			</td>
		</tr>
		</c:forEach>
		</c:if>
		</tbody>
	</table>
</div>
<!-- 数据列表的显示end -->
<!-- 分页start -->	
<table width="100%">
	<tr>
		<td width="20%">
			<div class="pagin" style="margin-top: 0px !important;">
				<div style="font-size: 14px; font-family: Helvetica Neue,Helvetica,Arial,sans-serif">共<i style="color: blue;">${page.totalElements }</i>条记录，当前第&nbsp;<i style="color: blue;">${page.number+1 }&nbsp;</i>页</div>
			</div>
		</td>
		<td>	
			<div id="Pagination" class="pagination" style="float:right;margin-right:20px;">
			<script type="text/javascript">
					$(document).ready(function(){
						//获取起始页	 
					  	$("#Pagination").pagination('${page.totalElements}', {//总页数
						  num_edge_entries : 2,//分页页码段右的页码个数
						  num_display_entries : 5,//分页页码段右的页码个数
						  callback : pageselectCallback,//回调函数
						  current_page : ${page.number},//当前页
						  items_per_page :'${page.size}'//每页多少条
					  	});
					});
					
					//分页回调函数
					function pageselectCallback(start, jq){
						$('#pageNumber').val(start);
						search(false);
					}
					//查询方法
				    function search(resetPageNum){
				    	if(resetPageNum){
					        $('#pageNumber').val(0);//重置分页参数,由于分页时也调用此方法，所以增加判断
						}
				        $('#searchForm').submit();
				    }
				    //重置
				    function resetSform(){
						location.href = '#';
				    } 
				</script>
		    </div>
		</td> 
	</tr>
</table>
<!-- 分页end -->
</body>
</html>